<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>ChatBox</title>
	<style type="text/css">
		@import "";
		.column1{
			height:300px;
		}
		#content{
			width:500px;
		}
		#users{
			width:200px;
		}
		#talk{
			width:75%;
		}
	</style>
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/fancywebsocket.js"></script>
	<script src="js/protocolObj.js"></script>
	<script src="js/playerObj.js"></script>
	<script>
		var Connection = new communication();
		var player;
		$(document).ready(function() {
			Connection.connect('ws://linkftp.myftp.org:12345');
			player = new playerObj($("#ytapiplayer"),"e4wq-t3uGCE");
		});
		
	</script>
</head>

<body>
	<table border=1>
		<tr>
			<td class="column1" valign="top"><div id="content"></div></td>
			<td class="column1">
				<select size="20" id="users">
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<form onsubmit="Connection.send_message();return false;">
					<input type="text" id="talk">
					<input type="submit" value="送出">
					<input type="reset" value="清除">
				</form>
			</td>
			<td>
				<div id="register" >
					<form onsubmit="Connection.register();return false;">
						Name:<input type="text" id="Name"><br>
						<input type="submit" value="登入">
					</form>
				</div>
				<div id="registed" style="display:none">
					
				</div>
			</td>
		</tr>
	</table>
	<div id="feedback"></div>
	<div id="ytapiplayer">   </div>
</body>
</html>